/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/12/11
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Menu, Icon } from 'antd';
import UTIcon from '../UTIcon';
import { Link } from 'react-router-dom';
import { arrayToTree, queryArray } from 'utils';
import pathToRegexp from 'path-to-regexp';

const Menus = ({ collapsed, darkTheme, navOpenKeys, handleClickMenuItem, menu, location, changeOpenKeys }) => {
  // 生成树状
  const menuTree = arrayToTree(menu.filter(_ => _.parentID !== '-1'), 'id', 'parentID');

  const levelMap = {};

  // 递归生成菜单
  const getMenus = (menuTreeN, sideFoldN) => {
    return menuTreeN.map((item) => {
      if (item.children) {
        if (item.parentID) {
          levelMap[item.id] = item.parentID;
        }
        return (
          <Menu.SubMenu
            key={item.id}
            title={<span>
              {item.icon && <Icon type={item.icon} />}
              {item.UTIcon && <UTIcon type={item.UTIcon} />}
              {(!sideFoldN || !menuTree.includes(item)) && item.name}
            </span>}
          >
            {getMenus(item.children, sideFoldN)}
          </Menu.SubMenu>
        );
      }

      return (
        <Menu.Item key={item.id}>
          <Link to={item.route || '#'}>
            {item.icon && <Icon type={item.icon} />}
            {item.UTIcon && <UTIcon type={item.UTIcon} />}
            {(!sideFoldN || !menuTree.includes(item)) && item.name}
          </Link>
        </Menu.Item>
      );
    });
  };
  const menuItems = getMenus(menuTree, collapsed);

  // 保持选中
  const getAncestorKeys = (key) => {
    let map = {};
    const getParent = (index) => {
      const result = [String(levelMap[index])];
      if (levelMap[result[0]]) {
        result.unshift(getParent(result[0])[0]);
      }
      return result;
    };
    for (let index in levelMap) {
      if ({}.hasOwnProperty.call(levelMap, index)) {
        map[index] = getParent(index);
      }
    }
    return map[key] || [];
  };

  const onOpenChange = (openKeys) => {
    const latestOpenKey = openKeys.find(key => !navOpenKeys.includes(key));
    const latestCloseKey = navOpenKeys.find(key => !openKeys.includes(key));
    let nextOpenKeys = [];
    if (latestOpenKey) {
      nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey);
    }
    if (latestCloseKey) {
      nextOpenKeys = getAncestorKeys(latestCloseKey);
    }
    changeOpenKeys(nextOpenKeys);
  };

  let menuProps = collapsed ? {
    onOpenChange,
    openKeys: navOpenKeys,
  } : {};


  // 寻找选中路由
  let currentMenu;
  let defaultSelectedKeys;
  for (let item of menu) {
    if (item.route && pathToRegexp(item.route).exec(location.pathname)) {
      currentMenu = item;
      break;
    }
  }

  // 获取所有被选中的key
  const getPathArray = (array, current, pid, id) => {
    let result = [String(current[id])];
    const getPath = (item) => {
      if (item && item[pid]) {
        result.unshift(String(item[pid]));
        getPath(queryArray(array, item[pid], id));
      }
    };
    getPath(current);
    return result;
  };
  if (currentMenu) {
    defaultSelectedKeys = getPathArray(menu, currentMenu, 'parentID', 'id');
  }

  if (!defaultSelectedKeys) {
    defaultSelectedKeys = ['1'];
  }

  return (
    <Menu
      {...menuProps}
      mode={'inline'}
      onClick={handleClickMenuItem}
      theme={darkTheme ? 'dark' : 'light'}
      selectedKeys={defaultSelectedKeys}
    >
      {menuItems}
    </Menu>
  );
};

Menus.propTypes = {
  menu: PropTypes.array,
  collapsed: PropTypes.bool,
  darkTheme: PropTypes.bool,
  handleClickMenuItem: PropTypes.func,
  navOpenKeys: PropTypes.array,
  changeOpenKeys: PropTypes.func,
  location: PropTypes.object,
};

export default Menus;
